/**
 * 放大镜2倍图
 * @param {*} el 最大盒子
 * @param {*} option 其他配置
 */
class Enlarge
{
    constructor(el,option = {}){
        this.el = document.querySelector(el)
        this.img = this.el.querySelector(".img")
        this.mask = this.el.querySelector(".mask")
        this.enlarge = this.el.querySelector(".enlarge")
        this.init()
    }

init(){
    this.overOut()
    this.maskMove()
}

overOut(){
    this.img.onmouseover = () => {
        this.mask.style.display = "block"
        this.enlarge.style.visibility = "visible"
    }
    this.img.onmouseout = () =>{
        this.mask.style.display = "none"
        this.enlarge.style.visibility = "hidden"
    }
}

maskMove(){
    this.img.onmousemove=(evt)=>{
        let e = evt || window.event 
        let left = e.pageX - this.el.offsetLeft-this.mask.offsetWidth/2
        let top = e.pageY - this.el.offsetTop-this.mask.offsetHeight/2
    
        if(top<=0) top=0
        if(left<=0) left=0

        let maxLeft = this.img.offsetWidth-this.mask.offsetWidth
        let maxTop = this.img.offsetHeight-this.mask.offsetHeight

        if(left>=maxLeft) left=maxLeft
        if(top>=maxTop) top=maxTop
        
        this.mask.style.left = `${left}px`
        this.mask.style.top = `${top}px`
        
        this.tbEnlarge(left, top)
    }
}

tbEnlarge(left, top){
    this.enlarge.style.backgroundPosition=`-${left*2}px -${top*2}px`
}
}

export default Enlarge